<script setup lang="ts">
import { useUserStore, useTodosStore } from "../store";
import PieChart from "./PieChart.vue";
import { dataURLtoBlob, download } from "../utils";

const userStore = useUserStore(),
  todosStore = useTodosStore(),
router = useRouter();

const chartRef = ref<InstanceType<typeof PieChart>>();
const exportImage = () => {
  const dataUrl = chartRef.value?.chartRef?.getDataURL({ type: "png" });
  download(dataURLtoBlob(dataUrl as string), "pie-chart.png");
};

const logout = () => {
  userStore.logout();
  router.push({ name: "login" });
};
</script>
<template>
  <div class="relative flex flex-col items-center bg-white rounded-lg mx-2">
    <div class="w-48 h-48 rounded-full overflow-hidden shadow-md">
      <img class="w-full h-full object-cover" :src="userStore.avatar" />
    </div>
    <h1 class="text-6xl my-4">{{ userStore.user?.nickname }}</h1>
    <div>
      <NButtonGroup>
        <NButton
          type="primary"
          round
          @click="router.push({ name: 'todo.new' })"
        >
          <template #icon></template>
          新代办
        </NButton>
        <NButton type="warning" round @click="logout">
          <template #icon></template>
          退出
        </NButton>
      </NButtonGroup>
    </div>
    <div class="flex flex-row space-x-8 my-6 uppercase">
      <div class="text-center">
        <h2 class="text-blue-500 text-4xl">{{ todosStore.count }}</h2>
        <div class="text-purple-500 text-sm font-semibold">count</div>
      </div>
      <div class="text-center">
        <h2 class="text-teal-500">{{ todosStore.finished }}</h2>
        <div class="text-purple-500 text-sm font-semibold">finished</div>
      </div>
      <div class="text-center">
        <h2 class="text-red-500">{{ todosStore.notFinished }}</h2>
        <div class="text-purple-500 text-sm font-semibold">not finished</div>
      </div>
    </div>
    <PieChart
      ref="chartRef"
      style="width: 100%; height: 450px"
      :data="todosStore.chartData"
      autoresize
    />
    <NButton
      @click="exportImage"
      class="absolute right-4 bottom-4"
      circle
      size="large"
    >
      <template #icon>
        <svg
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"
          ></path>
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z"
          ></path>
        </svg>
      </template>
    </NButton>
  </div>
</template>
